<template>
  <div class="login">
    <el-card class="content">
      <div class="login-title">注册账号</div>
      <el-form
        :model="users"
        :rules="rules"
        label-width="80px"
        size="mini"
        ref="regForm"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="users.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="users.pwd"></el-input>
        </el-form-item>
        <!-- 检查密码 -->
        <el-form-item label="确认密码" prop="checkPwd">
          <el-input v-model="users.checkPwd"></el-input>
        </el-form-item>
        <!-- 性别 -->
        <!-- <el-form-item label="性别" prop="sex">
          <el-select v-model="users.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select> -->
        <!-- </el-form-item> -->
        <!-- 手机号 -->
        <!-- <el-form-item label="手机号" prop="phone">
          <el-input v-model="users.phone"></el-input>
        </el-form-item> -->

        <!-- 邮箱 -->
        <!-- <el-form-item label="邮箱" prop="email">
          <el-input v-model="users.email"></el-input>
        </el-form-item> -->
        <div class="buttonBox">
          <el-button type="success" size="mini" @click="getUserReg"
            >注册</el-button
          >
          <el-button
            type="info"
            size="mini"
            @click="$refs.regForm.resetFields()"
            >重置</el-button
          >
          <el-button type="primary" size="mini" @click="$router.push('/login')"
            >返回</el-button
          >
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getUserReg } from "@/api/user.js";
export default {
  data() {

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.users.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    // -----------检测密码-----------

    return {
      users: {
        username: "",
        pwd: "",
        checkPwd: "",
      },

      // 验证规则
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 11,
            message: "长度在 5 到 11 个字符",
            trigger: "blur",
          },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 11,
            message: "长度在 5 到 11 个字符",
            trigger: "blur",
          },
        ],
        checkPwd: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    getUserReg() {
      this.$refs.regForm
        .validate()
        .then((rel) => {
          if (rel) {
            //请求注册api
            getUserReg(this.users)
              .then((rel) => {
                if (rel.data.code == 200) {
                  this.$message.success('注册成功')
                  this.$router.push('/login')
                }else{
                   this.$message.error('注册失败')
                }
              })
              .catch((err) => {
                this.$message.info('注册异常')
              });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "内容填写有误，请检查",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  width: 100%;
  background: url("../../assets/loginBgi.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    width: 450px;
    .login-title {
      text-align: center;
      font-weight: 800;
      padding-bottom: 20px;
      font-size: 19px;
    }
    .buttonBox {
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
      span {
        font-size: 13px;
        margin-right: 20px;
      }
      span:hover {
        color: rgb(145, 141, 141);
        cursor: pointer;
      }
    }
  }
}
</style>